<template>
  <div class="container">

    <!-- -----------------------------------------------------------------过滤器一栏---------------------------------- -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        :placeholder="table.name"
        style="width: 200px;"
      />
      <el-button
        type="primary"
        icon="Search"
      >
        {{ listQuery.search}}
      </el-button>
    </div>


    <!-- -----------------------------------------------------------------用户管理表格栏---------------------------------- -->
    <div class="table-container">
      <el-table
        :data="TeacherPersonalInfos"
        border
        fit
        highlight-current-row
        style="width: 100%;height: 100%"
        scrollbar-always-on="true"
      >
        <el-table-column
          :label="table.number"
          type="index"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          :label="table.name"
          prop="username"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          :label="table.sex"
          prop="sex"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.phoneNumber"
          prop="phoneNumber"
          width="180px"
          align="center"
        >
        </el-table-column>
        
        <el-table-column
          :label="table.role"
          prop="role"
          width="180px"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          :label="table.headPortrait"
          prop="headPortrait"
          width="180px"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          :label="table.actions"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="addTeacher(scope.row)"
            >
              {{ table.add}}
            </el-button>
            <el-button
              size="mini"
              @click="openUpdatePasswordBox(scope.row)"
            >
              {{ table.updatePassword }}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delTeacher(scope.row)"
            >
              {{ table.delete }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>      
    </div>

    <div class="updatePasswordBox">

        <!-- -------------------------------------修改密码对话框---------------------------------------------------------------- -->
        <el-dialog
            v-model="this.isChangePasswordVisible"
            title="修改密码对话框"
            width="30%"
            >      
            <el-form :model="this.password" label-width="120px">
                <el-form-item :label="table.newPassword" prop="newPassword">
                    <el-input type="text" v-model="password.newPassword"/>
                </el-form-item>
                <el-form-item :label="table.comfirmPassword" prop="comfirmPassword">
                    <el-input type="text" v-model="password.comfirmPassword"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="isChangePasswordVisible = false">取消</el-button>
                    <el-button type="primary" @click="updatePassword"
                        >确认修改密码</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>

  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import axios from '@/utils/axios'
// import { ElMessage } from 'element-plus'
export default {
  name: 'Good',
  setup() {
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10 // 分页大小
    })
    const dataMap = reactive({
      listQuery: {
        page: 1,
        limit: 10,
        className: "班级名称",
        search: "搜索",
        creClass: "创建班级",
        addTeacher:"解雇教师"
      },
      table: {
        number: "序号",
        name: "姓名",
        sex: "性别",
        headPortrait: "头像",
        phoneNumber: "手机号",
        role:"角色",
        oldPassword: "旧密码",
        newPassword: "新密码",
        comfirmPassword:"确认密码",


        actions: "操作",
        detail: "查看信息",
        updatePassword: "修改密码",
        edit: "编辑信息",
        add: "解雇教师",
        delete: "删除教师"
      },
      TeacherPersonalInfos: "",

      // 是否显示修改密码框
      isChangePasswordVisible: false,
      // 密码
      password:{
          newPassword: "",
          comfirmPassword: ""
      },
      // 选中的学生
      selectedStu: ''
    })
    onMounted(() => {
    })
    
    return {
      ...toRefs(state),
      ...toRefs(dataMap)
    }
  },
  methods: {
      // 创建班级
      createClass() {
          this.$router.push('/administractor/createclass')
      },
      // 获取教师信息
      getTeacherPersonalInfo() {
        var _this = this
        this.$axios
          .get('/user/teachers')
          .then( response => {
              let stateCode = response.headers["state"]
              if(stateCode=="200"){
                this.TeacherPersonalInfos = response.data
              }
              else if(stateCode==null){
                  this.$message.success("请求数据异常！")
              }
              else{
                  this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
              }

          })
          .catch(function (error){
              let stateCode = error.response.headers["state"]                            
              if(stateCode!=""){
                  _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
              }
              else{
                  _this.$message.error("后端异常")
              }
          })
          .then(function (){
              console.log("测试成功")
          })  
      },
      // 解雇教师
      addTeacher(user){
          var _this = this
          ElMessageBox.confirm('你确定解雇教师"' + user.username +  '"吗？', '警告',
              {
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'Cancel',
                  type: 'warning',
              }
          )
          .then(() => {
            let formData = new FormData()
            formData.append("teaId",user.userId)
            this.$axios
              .post('/administractor/teacher/fire',formData)
              .then( response => {
                  let stateCode = response.headers["state"]
                  if(stateCode=="200"){
                      location.reload()
                  }
                  else if(stateCode==""){
                      this.$message.success("解雇教师异常！")
                  }
                  else{
                      this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                  }

              })
              .catch(function (error){
                  let stateCode = error.response.headers["state"]                            
                  if(stateCode!=""){
                      _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                  }
                  else{
                      _this.$message.error("后端异常")
                  }
              })
              .then(function (){
                  console.log("测试成功")
              }) 
          })
          .catch(() => {
              ElMessage({
                  type: 'error',
                  message: '已取消解雇',
              })
          })
      },
      delTeacher(user) {
          var _this = this
          ElMessageBox.confirm('你确定删除教师"' + user.username +  '"吗？', '警告',
              {
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'Cancel',
                  type: 'warning',
              }
          )
          .then(() => {
              let formData = new FormData()
              formData.append('userId',user.userId)
              this.$axios
                  .post('user/del',formData)
                  .then( response => {
                      let stateCode = response.headers["state"]
                      if(stateCode=="200"){
                          location.reload()
                      }
                      else if(stateCode==""){
                          this.$message.success("删除教师异常！")
                      }
                      else{
                          this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                      }

                  })
                  .catch(function (error){
                      let stateCode = error.response.headers["state"]                            
                      if(stateCode!=""){
                          _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                      }
                      else{
                          _this.$message.error("后端异常")
                      }
                  })
                  .then(function (){
                      console.log("测试成功")
                  }) 
          })
          .catch(() => {
              ElMessage({
                  type: 'error',
                  message: '已取消删除',
              })
          })
      },
      // 打开修改密码对话框
      openUpdatePasswordBox(student){
        this.isChangePasswordVisible = true
        this.selectedStu = student
      },
      // 修改全体成员密码
      updatePassword(){
          var _this = this
          ElMessageBox.confirm('你确定修改教师"' + this.selectedStu.username +  '"的密码吗？', '警告',
              {
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'Cancel',
                  type: 'warning',
              }
          )
              .then(() => {
                  let formData = new FormData()
                  formData.append('userId',this.selectedStu.userId)
                  formData.append('newPassword',this.password.newPassword)
                  this.$axios
                      .post('administractor/updatepassword',formData)
                      .then(response=> {                    
                          let stateCode = response.headers["state"]
                          if(stateCode=="200"){
                            this.$message.success("修改教师密码成功！！")
                            this.isChangePasswordVisible = false
                          }
                          else if(stateCode==""){
                            this.$message.error("操作异常!")
                          }
                          else{
                            this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                          }
                      })
                      .catch(function (error){                          
                          let stateCode = error.response.headers["state"]                            
                          if(stateCode!=""){
                              _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                          }
                          else{
                            _this.$message.error("后端异常")
                          }
                      })
                      .then(function (){
                          console.log("测试成功")
                      }) 
              })
              .catch(() => {
                  ElMessage({
                      type: 'error',
                      message: '已取消修改教师密码',
                  })
              })
      }
  },
  mounted() {
    this.getTeacherPersonalInfo()
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 10%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }

  .table-container {
    height: 90%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
</style>